<div nz-row>
    <div nz-col [nzSpan]="14" style="align-content: center">
        <li style="border-bottom: 1px dashed black;display:flex"><a>基本信息</a><p>完善以下信息才能申请赞助，标有 (*)为必填项</p></li>
        <div>
            <div class="clearfix" style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <nz-upload
                    nzAction="{{uploadUrl}}"
                    nzListType="picture-card"
                    [(nzFileList)]="fileList"
                    [nzShowButton]="fileList.length < 1"
                    [nzPreview]="handlePreview">
                    <i class="anticon anticon-plus"></i>
                    <div class="ant-upload-text">Upload</div>
                </nz-upload>
                <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                    <ng-template #modalContent>
                        <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                    </ng-template>
                </nz-modal>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px">用户名:</div>
                <div nz-col [nzSpan]="14">{{username}}</div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px">手机号码:</div>
                <div nz-col [nzSpan]="14">{{phone}}</div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px">性别:</div>
                <div nz-col [nzSpan]="14">
                    <nz-radio-group [(ngModel)]="radioValue">
                        <label  nz-radio [nzValue]="'0'"><span>女</span></label>
                        <label nz-radio [nzValue]="'1'"><span>男</span></label>
                    </nz-radio-group>
                </div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>入学年份:
                </div>
                <div nz-col [nzSpan]="14"><nz-datepicker [(ngModel)]="entrance" [nzPlaceHolder]="'请选择入学年份'"></nz-datepicker></div>
            </div>
            <div nz-row style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>大学专业:
                </div>
                <div nz-col [nzSpan]="14"><nz-input [(ngModel)]="majorsub" [nzPlaceHolder]="'请输入大学专业'"></nz-input></div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px">
                    <p style="color:red">*</p>QQ:
                </div>
                <div nz-col [nzSpan]="14"><nz-input [(ngModel)]="qq" [nzPlaceHolder]="'请输入QQ'"></nz-input></div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <p>同意其他用户使用积分查看我的联系方式</p>
                <span><nz-switch [(ngModel)]="switchValue"></nz-switch></span>
            </div>
        </div>
        <div>
            <h2 style="border-bottom: 1px dashed black;margin-bottom:10px;">社团信息</h2>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>学校名称:</div>
                <div nz-col [nzSpan]="14"><nz-input (click)="showModal('university')" [(ngModel)]="school"></nz-input></div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>校区:
                </div>
                <div nz-col [nzSpan]="14"><nz-input (click)="showModal('area')" [(ngModel)]="areaName"></nz-input></div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>社团名称:
                </div>
                <div nz-col [nzSpan]="14"><nz-input (click)="showModal('campusname')" [(ngModel)]="campusName"></nz-input></div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>所属部门:
                </div>
                <div nz-col [nzSpan]="14"><nz-input [(ngModel)]="department"></nz-input></div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px" >
                    <p style="color:red">*</p>部门职位:
                </div>
                <div nz-col [nzSpan]="14">
                    <nz-select [(ngModel)]="positionid" [nzPlaceHolder]="'请选择部门职位'" style="width:50%">
                        <nz-option *ngFor="let op of position" [nzValue]="op.value" [nzLabel]="op.option">{{op.option}}</nz-option>
                    </nz-select>
                </div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <div nz-col [nzSpan]="10" style="display:flex;justify-content:flex-end;padding-right:10px"><p style="color:red">*</p>擅长类型:</div>
                <div nz-col [nzSpan]="14">
                    <nz-checkbox-group [(ngModel)]="checkOptions" (ngModelChange)="updateStat(checkOptions)"></nz-checkbox-group>
                </div>
            </div>
            <div style="display:flex;align-item: center;justify-content:center;margin-bottom:10px">
                <button nz-button [nzType]="'primary'" (click)="submit()">提交</button>
            </div>
        </div>
        <nz-modal [nzVisible]="isVisible1" [nzTitle]="'请选择学校'" [nzFooter]="modalfooter"
                  [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
            <ng-template #modalContent>
                <div *ngIf="routename=='university'">
                    <div style="display:flex;justify-content: space-around;padding-bottom: 10px">
                        <nz-select [(ngModel)]="prOpt" [nzPlaceHolder]="'请选择省'" (nzOpenChange)="chooseProvince(prOpt,0)" style="width:30%">
                            <nz-option *ngFor="let op of province" [nzValue]="op" [nzLabel]="op.province">{{op.province}}</nz-option>
                        </nz-select>
                        <nz-select [(ngModel)]="cOpt" [nzPlaceHolder]="'请选择市'" style="width:30%">
                            <nz-option *ngFor="let op of cityList" [nzValue]="op.cityid" [nzLabel]="op.city">{{op.city}}</nz-option>
                        </nz-select>
                        <nz-input [nzType]="'search'" [nzPlaceHolder]="'input search text'" [(ngModel)]="school"
                                  style="width: 200px;" (nzOnSearch)="onSearch($event)"></nz-input>
                    </div>
                    <div style="display:flex;justify-content: space-between;height:300px;flex-direction: row;
            flex-wrap:wrap;background-color:#F0F0F0">
                        <div *ngFor="let sch of schoolList" (click)="chooseSch(sch)"
                             style="width:30%;height:10%;margin-right:10px;padding-bottom: 10px;background-color: #FFFFFF">{{sch.universityname}}</div>
                    </div>
                </div>
                <div *ngIf="routename=='area'">
                    <div>
                        请在下面列表里选择你的校区
                    </div>
                    <div style="display:flex;justify-content: flex-start;height:200px;flex-direction: row;flex-wrap:wrap;background-color: 	#F8F8F8">
                        <div *ngFor="let ar of area" style="border:1px solid black;width:30%;height:10%;margin-right: 10px" (click)="chooseArea(ar)">{{ar.areaname}}</div>
                    </div>
                </div>
                <div *ngIf="routename=='campusname'">
                    <div *ngIf="addOrReturn">
                        <div style="display:flex;justify-content: flex-start">
                            <p>请在下面列表里选择你所在的社团，如果没有手动添加</p>
                            <button nz-button (click)="addCampus()" [nzType]="'primary'">创建社团</button>
                        </div>
                        <div style="display:flex;justify-content: flex-start;height:200px;flex-direction: row;flex-wrap:wrap">
                            <div *ngFor="let cam of campusList" style="border:1px solid black;width:30%;height:10%" (click)="chooseCam(cam)">{{cam.campusname}}</div>
                        </div>
                    </div>
                    <div *ngIf="!addOrReturn">
                        <div style="display:flex;justify-content: flex-start;margin-bottom:10px;align-items:center">
                            <p style="margin-right: 10px">在这里添加你的社团信息</p>
                            <button nz-button (click)="returnCamList()" [nzType]="'primary'">返回列表</button>
                        </div>
                        <div nz-row [nzGutter]="8">
                            <div nz-col [nzSpan]="16">
                                <div style="display: flex;margin-bottom: 10px;">
                                    <div nz-col [nzSpan]="5" style="margin-right: 5px">社团名称:</div>
                                    <div nz-col [nzSpan]="16"><nz-input [(ngModel)]="newcamname"></nz-input></div>
                                </div>
                                <div style="display: flex;margin-bottom: 10px;">
                                    <div nz-col [nzSpan]="5" style="margin-right: 5px">社团类型:</div>
                                    <div  nz-col [nzSpan]="16">
                                        <nz-select [(ngModel)]="newcamtype" [nzPlaceHolder]="'请选择社团类型'" style="width:100%">
                                            <nz-option *ngFor="let opt of campustypeList" [nzValue]="opt.camtype" [nzLabel]="opt.desc">{{opt.desc}}</nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                                <div style="display: flex;margin-bottom: 10px;justify-content: flex-start;">
                                    <div nz-col [nzSpan]="5" style="margin-right: 5px">社团性质:</div>
                                    <div nz-col [nzSpan]="16">
                                        <nz-select [(ngModel)]="newcamlevel" [nzPlaceHolder]="'请选择社团性质'" style="width:100%">
                                            <nz-option *ngFor="let opl of campuslevelList" [nzValue]="opl.level" [nzLabel]="opl.desc">{{opl.desc}}</nz-option>
                                        </nz-select>
                                    </div>
                                </div>
                                <div style="display: flex;margin-bottom: 10px;">
                                    <div nz-col [nzSpan]="5" style="margin-right: 5px">社团规模:</div>
                                    <div nz-col [nzSpan]="16"><nz-input [(ngModel)]="newcamscale"></nz-input></div>
                                </div>
                                <div style="display: flex;margin-bottom: 10px;">
                                    <div nz-col [nzSpan]="5" style="margin-right: 5px">社团介绍:</div>
                                    <div nz-col [nzSpan]="16"><nz-input [(ngModel)]="newcamintroduce"></nz-input></div>
                                </div>
                                <div>
                                    <button nz-button [nzType]="'primary'" (click)="confirmAddCampus()">确认提交社团</button>
                                </div>
                            </div>
                            <div nz-col [nzSpan]="5">
                                <nz-upload
                                    nzAction="https://localhost:8888/"
                                    nzListType="picture-card"
                                    [(nzFileList)]="newfileList"
                                    [nzShowButton]="newfileList.length < 1"
                                    [nzPreview]="handlePreview">
                                    <i class="anticon anticon-plus"></i>
                                    <div class="ant-upload-text">Upload</div>
                                </nz-upload>
                                <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent1" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
                                    <ng-template #modalContent1>
                                        <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
                                    </ng-template>
                                </nz-modal>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
            <ng-template #modalfooter>
                <div *ngIf="noticeuni!=null">
                    {{noticeuni}}
                </div>
                <div *ngIf="noticeCampus!=null">
                    <p>{{noticeCampus}}<a *ngIf="camarea" (click)="campusArea()">展开</a><a *ngIf="!camarea" (click)="campusArea()">折起</a></p>
                    <div *ngIf="!camarea" style="width:40%">
                        <div>
                            <nz-input [nzType]="'search'" [nzPlaceHolder]="'请输入校区全称'" [(ngModel)]="newarea"></nz-input>
                        </div>
                        <div>
                            <nz-select [(ngModel)]="addAreaPro" [nzPlaceHolder]="'请选择省'" (nzOpenChange)="chooseProvince(addAreaPro,1)" style="width:50%">
                                <nz-option *ngFor="let op of province" [nzValue]="op" [nzLabel]="op.province">{{op.province}}</nz-option>
                            </nz-select>
                            <nz-select [(ngModel)]="addAreaCity" [nzPlaceHolder]="'请选择市'" style="width:50%">
                                <nz-option *ngFor="let op of cityList" [nzValue]="op.cityid" [nzLabel]="op.city">{{op.city}}</nz-option>
                            </nz-select>
                        </div>
                        <div>
                            <nz-input [nzPlaceHolder]="'请输入街道、门牌号'"></nz-input>
                        </div>
                        <div>
                            <button nz-button (click)="confirmAddArea()">确认</button>
                        </div>
                    </div>
                </div>
            </ng-template>
        </nz-modal>
    </div>
</div>
